<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <style type="text/css">
        	tr .msgTd {
        		text-align: center;
        	}
        </style>
    </head>
    <body>
    <div class="x-body layui-anim layui-anim-up" id="app">
        <fieldset class="layui-elem-field">
            <legend>全部消息</legend>
            <div class="layui-field-box">
            	
                <table class="layui-table" lay-skin="line">
                	<colgroup>
					    <col width="300">
					    <col width="20">
				    </colgroup>
                	<thead>
					    <tr>
					        <th style="text-align: center;" colspan="2">共有<span style="font-size: 1.5em;color: #007DDB;">{{ pageInfo.total }}条</span>学校消息，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</th>
					    </tr> 
					</thead>
                    <tbody>
                        <tr v-for="message in messages">
                            <td >
                                <a class="x-a" href="javascript:;" onclick="open_message(this)" :data-id="message.id" :data-title="message.title" target="_blank">{{ message.title }}</a>
                            </td>
                            <td class="msgTd">{{ message.operatorTime }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="page" style="margin-top: 10px !important;">
                    <div>
                      <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
                      <a class="first pageTxt" href="javascript:void(0)">首页</a>
                      <template v-for="pageNum in pageInfo.navigatepageNums">
                          <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
                          <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
                      </template>
                      <a class="last pageTxt" href="javascript:void(0)">尾页</a>
                      <a class="next pageTxt" href="javascript:void(0)">下一页</a>
                    </div>
               </div>
            </div>
        </fieldset>
    </div>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    </body>
    <script>
	    var vm = new Vue({
	        el : '#app',
	        data : {
	            messages : "",
	            pageInfo:""
	        },
	        created : function() {
	            // 获取学校消息列表
	            this.listMessage(1);
	        },
	        methods : {
	        	listMessage : function(pageNum) {
	                var vm = this;
	                $.ajax({
	                    url : "/sys/info/listMessage",
	                    data:{
	                        pageNum:pageNum
	                    },
	                    type : "get",
	                    success : function(result) {
	                        if (result.state) {
	                            vm.pageInfo = result.data;
	                            vm.messages = result.data.list;
	                        } else {
	                            layui.use(['layer'], function(){
	                                var layer = layui.layer
	                                layer.msg(""+result.msg, {icon: 5});
	                            });
	                        }
	                    }
	                });
	            }
	        }
	    });
	    
	    // 打开消息的详情页
	    function open_message(obj) {
	    	var title = $(obj).attr("data-title");
	    	var id = $(obj).attr("data-id");
	    	x_admin_show(title, '/sys/info/toMessageDetail?id=' + id, 600, 400);
	    }
	    
	    // 点击页码数，进行跳转
        $(".page").delegate(".num", "click", function() {
            var pageNum = $(this).attr("data");
            vm.listMessage(pageNum);
        });
        // 上一页
        $(".page").delegate(".prev", "click", function() {
            if (vm.pageInfo.hasPreviousPage) {
                vm.listMessage(vm.pageInfo.pageNum - 1);
            }
        });
        // 下一页
        $(".page").delegate(".next", "click", function() {
            if (vm.pageInfo.hasNextPage) {
                vm.listMessage(vm.pageInfo.pageNum + 1);
            }
        });
        // 首页
        $(".page").delegate(".first", "click", function() {
            if (!vm.pageInfo.isFirstPage) {
                vm.listMessage(1);
            }
        });
        // 尾页
        $(".page").delegate(".last", "click", function() {
            if (!vm.pageInfo.isLastPage) {
                vm.listMessage(vm.pageInfo.pages);
            }
        });
    </script>
</html>